<script setup>
import { ref, onMounted } from 'vue'
import {BaseImgUrl} from "../utils/lshttp";
import {useCommonInfoStore} from "../stores/modules/commonInfo";
const commonInfoStore = useCommonInfoStore() // 使用commonInfoStore状态管理器

const props = defineProps({
  right: { // 客服按钮的右侧距离
    type: Number,
    default: 10
  },
  bottom: { // 客服按钮的底部距离
    type: Number,
    default: 100
  },
  showService: { // 是否显示
    type: Boolean,
    default: false
  },
  showNewUser: { // 是否显示
    type: Boolean,
    default: false
  }
})
// 获取容器宽度和高度，以便在拖动时判断是否超出边界。
const containerWidth = uni.getSystemInfoSync().windowWidth; // 获取窗口宽度（容器宽度）
const containerHeight = uni.getSystemInfoSync().windowHeight; // 获取窗口高度（容器高度）
// 客服拖动按钮
const startX = ref(0)
const startY = ref(0)
const moveX = ref(0)
const moveY = ref(0)
const serviceRight = ref(10)
const serviceBottom = ref(100)

onMounted(() => {
  serviceRight.value = props.right
  /* #ifdef MP || APP-PLUS */
  serviceBottom.value = props.bottom
  /* #endif */
  /* #ifdef H5 */
  serviceBottom.value = Number(props.bottom) + 250
  /* #endif */
})
const touchStart = (e) => {
  startX.value = e.touches[0].clientX
  startY.value = e.touches[0].clientY
}
const touchMove = (e) => {
  moveX.value = e.touches[0].clientX - startX.value
  moveY.value = e.touches[0].clientY - startY.value
  const newRight = serviceRight.value - moveX.value
  const newBottom = serviceBottom.value - moveY.value
  /* serviceRight.value -= moveX.value
  serviceBottom.value -= moveY.value */
  // 检查是否超出边界，并更新位置
  if (newRight >= 0 && newRight <= containerWidth - 40) { // 假设按钮宽度为100px，防止超出右边界
    serviceRight.value = newRight;
  }
  if (newBottom >= 0 && newBottom <= containerHeight - 140) { // 假设按钮高度为100px，防止超出下边界
    serviceBottom.value = newBottom;
  }

  startX.value = e.touches[0].clientX
  startY.value = e.touches[0].clientY
}
const touchEnd = (e) => {
}
// 打开客服
const openService = () => {
  console.log('commonInfoStore.serviceUrl', commonInfoStore.serviceUrl)
  // #ifdef MP
  wx.openCustomerServiceChat({
    //企业微信的企业id
    corpId: commonInfoStore.serviceUrl.applet.appid,
    extInfo: {
      //客服链接
      url: commonInfoStore.serviceUrl.applet.path
    },
  })
  // #endif
  // #ifdef APP-PLUS
  plus.share.getServices(res => {
    const wxServices = res.find(i => i.id.toString() === 'weixin')
    if (wxServices) {
      wxServices.openCustomerServiceChat({
        corpid: commonInfoStore.serviceUrl.app.corpId,
        url: commonInfoStore.serviceUrl.app.url
      })
    }
  }, function (res) {
    console.log(JSON.stringify(res));
  })
  // #endif
  // #ifdef H5
  window.location.href = commonInfoStore.serviceUrl.h5.url
  // #endif
}
// 打开教程
const toNewUser = () => {
  uni.navigateTo({
    url: "/pages/index/novice"
  })
}

</script>

<template>
  <view class="server_box" :style="{right: serviceRight + 'rpx', bottom: serviceBottom + 'rpx'}" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
    <view v-if="showService"
        @click="openService"
        style="width: 70rpx;height: 70rpx;background-color: #fdfdfd;display: flex;flex-direction: column;align-items: center;justify-content: center;box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.3);border-radius: 100rpx;">
      <image :src="BaseImgUrl + '/home/pz/kefu.png'" mode="widthFix" style="height:33rpx;width:33rpx"></image>
      <view style="color: #323232;font-size: 18rpx;">客服</view>
    </view>
    <view style="height: 10rpx"></view>
    <view v-if="showNewUser"
        @click="toNewUser" class="help">
      <image :src="BaseImgUrl + '/home/pz/new_user.png'" mode="widthFix" style="height:33rpx;width:33rpx"></image>
      <view style="color: #323232;font-size: 18rpx;">教程</view>
    </view>
  </view>
</template>

<style lang="scss">
.server_box {
  position: fixed;
  /* right: 10rpx;
  top: 20%; */
  z-index: 999;
  border-radius: 50%;

  .icon {
    width: 38rpx;
    height: 38rpx;
  }

  .text {
    font-size: 20rpx;
    color: #333;
  }
}
.help {
  min-height: 70rpx;
  min-width: 70rpx;
  background-color: #fdfdfd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.3);
  border-radius: 100rpx;
}

</style>